<template>
	<view>
		<navbar title="评价" />
		<view class="v-details-card evaluate-head flex align-item_center justify-content_space-between border-box">
			<view :class="{'active':currentIndex === 0}" @click="changeCurrentIndex(0)">全部</view>
			<view :class="{'active':currentIndex === 1}" @click="changeCurrentIndex(1)">好评({{statis.goodNum}})</view>
			<view :class="{'active':currentIndex === 2}" @click="changeCurrentIndex(2)">中评({{statis.commonNum}})</view>
			<view :class="{'active':currentIndex === 3}" @click="changeCurrentIndex(3)">差评({{statis.badNum}})</view>
		</view>

		<empty v-if="result.list.length === 0" />

		<view v-for="item in result.list" :key="item">
			<view class="v-details-card border-box v-evaluate">
				<view class="user flex align-item_center">
					<image class="block user-avatar radius_50" :src="item.userAvatar" />
					<view class="user-info">
						<view class="flex align-item_center">
							<text>{{item.userNickname}}</text>
							<image v-for="b in item.benefitScores" :key="b" class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/9.png" />
						</view>
						<view>{{item.skuProperties.map(sku=>sku.valueName).join(" ")}}</view>
					</view>
				</view>
				<view class="content">{{item.content || "用户默认好评"}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import empty from "@/components/empty.vue"
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import CommentApi from "@/sheep/api/product/comment.js"

	onReachBottom(() => {
		if (result.list.length >= result.total) return;
		params.pageNo++;
		getPage()
	})

	const currentIndex = ref(0)
	const changeCurrentIndex = (index) => {
		currentIndex.value = index;
		params.pageNo = 1;
		params.type = index;
		getPage()
	}

	const result = reactive({
		list: [],
		total: 0,
	})
	const params = reactive({
		pageNo: 1,
		pageSize: 10,
		type: 0,
	})
	const getPage = () => {
		CommentApi.getCommentPage(spuId.value, params.pageNo, params.pageSize, params.type).then((res) => {
			result.total = res.data.total;
			if (params.pageNo === 1) result.list = res.data.list
			else result.list = result.list.concat(res.data.list)
		})
	}


	const statis = reactive({
		badNum: 0,
		commonNum: 0,
		goodNum: 0
	})
	const statistics = () => {
		CommentApi.statistics(spuId.value).then((res) => {
			statis.badNum = res.data.badNum
			statis.commonNum = res.data.commonNum
			statis.goodNum = res.data.goodNum
		})
	}

	const spuId = ref();
	onLoad((option) => {
		spuId.value = option.id
		statistics()
		getPage()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.v-details-card {
		margin: 20rpx auto;
	}

	.evaluate-head {
		padding: 20rpx;
		position: sticky;
		top: 176rpx;

		view {
			width: 132rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 100rpx;
			border: 2rpx solid rgba(167, 37, 48, 1);
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(167, 37, 48, 1);
			transition: all .2s;
		}

		.active {
			background: rgba(167, 37, 48, 1);
			color: rgba(255, 255, 255, 1);
		}
	}
</style>